import {Modal, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import * as React from "react";
import { RootSiblingParent } from 'react-native-root-siblings';

const pupoModal = function ({ cancelModal, visible, children, title, onOk, okCancel, footer, style }) {

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={visible}
        >
            <TouchableOpacity
                style={styles.cancelCenteredView}
                // onPress={() => cancelModal()}
                activeOpacity={1}

            >
                <RootSiblingParent>
                    <View style={[styles.cancelfollowContainer, style]}>
                        <View>
                            <Text style={styles.followTitle}>{ title }</Text>
                        </View>
                        <View>
                            { children }
                        </View>

                        {
                            !footer && (
                                <View style={styles.footerContainer}>
                                    <TouchableOpacity onPress={okCancel}>
                                        <View style={[styles.footerBtn, styles.footerCancel]}>
                                            <Text style={{ color: "#2A2B30" }}>取消</Text>
                                        </View>
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={onOk}>
                                        <View style={[styles.footerBtn, styles.footerOk]}>
                                            <Text style={{ color: "#fff" }}>确定</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            )
                        }
                        {
                            footer && footer()
                        }
                    </View>
                </RootSiblingParent>

            </TouchableOpacity>
        </Modal>
    )
};

export default pupoModal;

const styles = StyleSheet.create({
    cancelCenteredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',  // 背景遮罩
        zIndex: 10,
    },
    cancelfollowContainer: {
        position: "relative",
        width: 296,
        // height: 160,
        backgroundColor: "#fff",
        borderRadius: 8,
        padding: 20,
        zIndex: 10
    },
    followTitle: {
        fontSize: 18,
        color: "#2A2B30",
        fontWeight: 400,
        textAlign: "center"
    },
    followCotent: {
        fontSize: 14,
        color: "#676978",
        textAlign: "center",
        marginTop: 14,
    },
    footerContainer: {
        flexDirection: "row",
        // marginTop: 34,
        justifyContent: "space-between"
    },
    footerBtn: {
        width: 114,
        height: 38,
        borderRadius: 19,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    footerCancel: {
        backgroundColor: "#F7F8F9",
    },
    footerOk: {
        backgroundColor: "#EC6138",
    },
});
